<template>
    <div class="todo-list">
      <h2>待办事项列表</h2>
      <form @submit.prevent="addTodo">
        <input v-model="newTodo" type="text" placeholder="添加新待办事项" />
        <button type="submit">添加</button>
      </form>
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          {{ todo }}
          <button @click="removeTodo(index)">删除</button>
        </li>
      </ul>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  
  export default defineComponent({
    name: 'TodoList',
    setup() {
      const todos = ref<string[]>([]);
      const newTodo = ref('');
  
      function addTodo() {
        if (newTodo.value.trim()) {
          todos.value.push(newTodo.value);
          newTodo.value = '';
        }
      }
  
      function removeTodo(index: number) {
        todos.value.splice(index, 1);
      }
  
      return { todos, newTodo, addTodo, removeTodo };
    },
  });
  </script>
  
  <style scoped>
  .todo-list {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    text-align: center;
  }
  
  .todo-list ul {
    list-style: none;
    padding: 0;
  }
  
  .todo-list li {
    margin-bottom: 10px;
  }
  
  button {
    margin-left: 10px;
  }
  </style>
  